<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>新闻资讯</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="../../lib/layui-v2.5.5/css/layui.css" media="all">
		<link rel="stylesheet" href="../../css/public.css" media="all">
	</head>
	<body>
		<div class="layuimini-container">
			<div class="layuimini-main">
				<div style="margin: 10px 10px 10px 10px">
					<form class="layui-form layui-form-pane" action="">
						<div class="layui-form-item">
							<div class="layui-inline">
								<label class="layui-form-label">标题：</label>
								<div class="layui-input-inline">
									<input type="text" id="title" name="title" autocomplete="off" class="layui-input">
								</div>
							</div>
							<div class="layui-inline">
								<button id="btn-search" type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-search-btn"><i
									 class="layui-icon"></i>
									搜 索</button>
							</div>
						</div>
					</form>
				</div>
				<script type="text/html" id="mytoolbar">
					<div class="layui-btn-container">
						{{# if (isAuth('news','新增')){}}
						<button class="layui-btn layui-btn-sm data-add-btn" lay-event="add"> 添加 </button>
						{{#}}}
						{{# if (isAuth('news','删除')){}}
						<button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"> 删除 </button>
						{{#}}}
											</div>
				</script>
				<table class="layui-hide" id="mytable" lay-filter="currentTableFilter"></table>

				<script type="text/html" id="pictureBar">
					{{# if (d.picture){ }}
					<div>
					<img src="{{d.picture.split(',')[0]}}" width="50" height="50">
					</div>
					{{# }else{ }}
					<div v-else>无图片</div>
					{{# } }}
				</script>

				<script type="text/html" id="shenheBar">
					{{# if (isAuth('news','审核')){}}
						<a class="layui-btn layui-btn-xs layui-btn-success" lay-event="sh">审核</a>
					{{#}}}
				</script>

				<script type="text/html" id="currentTableBar">
					{{# if (isAuth('news','查看')){}}
					<a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="info">查看</a>
					{{#}}}
					{{# if (isAuth('news','修改')){}}
					<a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="edit">编辑</a>
					{{#}}}
					{{# if (isAuth('news','删除')){}}
					<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">删除</a>
					{{#}}}
				</script>

			</div>
		</div>

		<script src="../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
		<script src="../../js/lay-config.js?v=2.0.0" charset="utf-8"></script>
		<script src="../../js/menu.js" charset="utf-8"></script>
		<script src="../../js/vue.js" charset="utf-8"></script>
		<script>
			layui.use(['form', 'table', 'laydate', 'http'], function() {
				var $ = layui.jquery;
				var form = layui.form;
				var table = layui.table;
				var http = layui.http;
				var laydate = layui.laydate;
				table.render({
					elem: '#mytable',
					url: http.baseurl + 'news/list',
					toolbar: '#mytoolbar',
					defaultToolbar: ['filter', 'exports', 'print'],
					headers: {
						'Token': localStorage.getItem("Token")
					},
					request: {
						pageName: 'page', //页码的参数名称，默认：page
						limitName: 'limit' //每页数据量的参数名，默认：limit
					},
					parseData: function(res) { //res 即为原始返回的数据
						if (res.code == 401) {
							window.parent.location.href = '../login/login.html'
						}
						return {
							"code": res.code, //解析接口状态
							"msg": res.msg, //解析提示文本
							"count": res.data.total, //解析数据长度
							"data": res.data.list //解析数据列表
						};
					},
					cols: [
						[{
								type: "checkbox",
								width: 50,
								fixed: "left"
							},
							{
								field: 'id',
								title: 'ID',
								sort: true
							},
							{
								field: 'title',
								title: '标题',
								minWidth: '150',
								align: "center"
							},
							{
								title: '图片',
								templet: '#pictureBar',
								minWidth: '100',
								align: "center"
							},
							{
								title: '操作',
								width: 200,
								templet: '#currentTableBar',
								align: "center"
							}
						]
					],
					limits: [10, 15, 20, 25, 50, 100],
					limit: 15,
					page: true
				});

				// 监听搜索操作
				form.on('submit(data-search-btn)', function(data) {

					var param = {};
					if (data.field.title) {
						param['title'] = '%' + data.field.title + '%'
					}

					//执行搜索重载
					table.reload('mytable', {
						page: {
							curr: 1
						},
						where: param,
						done: function(res, curr, count) {
							this.where = {};
						}
					}, 'data');
					return false;
				});
				// toolbar监听事件
				table.on('toolbar(currentTableFilter)', function(obj) {
					if (obj.event === 'add') { // 监听添加操作
						var index = layer.open({
							title: '添加',
							type: 2,
							shade: 0.2,
							maxmin: true,
							shadeClose: true,
							area: ['80%', '80%'],
							content: './add.html',
						});
						$(window).on("resize", function() {
							layer.full(index);
						});
					} else if (obj.event === 'delete') { // 监听删除操作
						var checkStatus = table.checkStatus('mytable'),
							data = checkStatus.data;
						if (data.length == 0) {
							layer.msg('请选择要删除的数据');
							return
						}
						var ids = [];
						for (var i = 0; i < data.length; i++) {
							ids.push(data[i].id);
						}
						layer.confirm('是否删除选中数据？', function(index) {
							http.requestJson('news/delete', 'post', ids, function(res) {
								layer.close(index);
								// 触发click，重新请求查询接口
								$('#btn-search').click();
							})
						});
					}
				});
				// 表格按钮监听
				table.on('tool(currentTableFilter)', function(obj) {
					console.log(obj)
					var data = obj.data;
					if (obj.event === 'info') {
						var index = layer.open({
							title: '查看',
							type: 2,
							shade: 0.2,
							maxmin: true,
							shadeClose: true,
							area: ['80%', '80%'],
							content: './info.html?id=' + obj.data.id,
						});
						$(window).on("resize", function() {
							layer.full(index);
						});
					} else if (obj.event === 'edit') {
						var index = layer.open({
							title: '编辑',
							type: 2,
							shade: 0.2,
							maxmin: true,
							shadeClose: true,
							area: ['80%', '80%'],
							content: './edit.html?id=' + obj.data.id,
						});
						$(window).on("resize", function() {
							layer.full(index);
						});
						return false;
					} else if (obj.event === 'delete') {
						layer.confirm('是否删除该数据？', function(index) {
							http.requestJson('news/delete', 'post', [obj.data.id], function(res) {
								layer.close(index);
								obj.del();
							})
						});
					}
				});
			});
		</script>
		<script>

		</script>

	</body>
</html>
